import { useState, useRef, useCallback, useEffect } from "react";
import { useActivate } from 'react-activation'
import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { QueryPage } from "@components";
import Details from "./components/details";
import AuditModal from "./components/auditModal";
import { fields, GetColumns, GetModalFields } from "./config";

import { findEmerManagement, addAndEditEmerBuildMsg, findEmerMasterList } from "@apis/massMsgApi";

const MassMsg = () => {

  const [masterList, setMasterList] = useState([])
  const [isDisabled, setIsDisabled] = useState(false)
  const detailsRef = useRef("detailsRef");

  const getMasterList = async () => {
    const newMasterList = await findEmerMasterList()
    setMasterList(newMasterList)
  }

  useEffect(() => {
    getMasterList()
  },[])

  useActivate(() => {
    getMasterList()
  })

  const queryFormRef = useRef("queryFormRef");
  const formProps = {
    formRef:queryFormRef,
    fields: fields,
    extraTail: (
      <>
        <Button icon={<PlusOutlined />} onClick={() => {
          setIsDisabled(false)
          modalRef.current.showModal()
        }}>
          新建群发
        </Button>
      </>
    ),
  };

  //编辑
  const edit = (row) => {
    modalRef.current.showModal(row);
    setIsDisabled(true)
  };

  //编辑
  const audit = (row) => {
    auditModalRef.current.showModal(row);
  };

  const modalRef = useRef("modalRef");
  const tableProps = {
    rowKey: "msgCustMainId",
    columns: GetColumns(edit, detailsRef, audit)
  };

  const modalFormRef = useRef('modalFormRef')
  const modalFormProps = {
    formRef: modalFormRef,
    fields: GetModalFields(masterList, modalFormRef, isDisabled),
  };

  const auditModalRef = useRef('auditModalRef')
  return (
    <>
      <QueryPage
        formProps={formProps}
        tableProps={tableProps}
        queryApi={findEmerManagement}
        modalRef={modalRef}
        modalFormProps={modalFormProps}
        addApi={addAndEditEmerBuildMsg}
        updataId="msgCustMainId"
        updataApi={addAndEditEmerBuildMsg}
      />

      <Details detailsRef={detailsRef} />
      <AuditModal auditModalRef={auditModalRef} queryFormRef={queryFormRef} />
    </>
  );
};

export default MassMsg;
